import "./Reg.css";
import { Button } from 'antd';
import axios from "../axios";
import { useNavigate } from "react-router-dom";
import { Link } from 'react-router-dom';
import { useState } from 'react';
import { DatePicker } from 'antd';

function Reg() {
    const [username, setUsername] = useState(''); // 管理用户名输入
    const [password, setPassword] = useState(''); // 管理密码输入
    const [usercount, setUsercount] = useState(''); // 管理账号输入
    const [gender, setGender] = useState(''); // 管理性别选择
    const [phone, setPhone] = useState(''); // 管理手机号码输入
    const [birthdate, setBirthdate] = useState(''); // 管理出生日期输入
    const navigate = useNavigate();

    const Register = async () => {
        if (!username || !password || !usercount || !gender || !phone || !birthdate) {
            alert('请填写所有必填项');
            return;
        }
        try {
            const res = await axios.post("/users/reg", {
                name: username,
                pwd: password,
                account: usercount,
                gender: gender,
                phone: phone,
                birthdate: birthdate.format('YYYY-MM-DD') // 转换为字符串格式
            });
    
            if (res.data && res.data.code === 2000) {
                alert(res.data.msg);
                navigate("/login");
            } else {
                alert(res.data.msg);
            }
        } catch (error) {
            // 捕获并处理错误
            if (error.response) {
                // 请求已发出，但服务器响应的状态码不在 2xx 范围内
                alert(error.response.data.msg);
            } else if (error.request) {
                // 请求已发出，但没有收到响应
                alert('请求超时，请稍后再试');
            } else {
                // 一些设置请求时发生错误
                alert('请求失败，请稍后再试');
            }
        }
    };

    return (
        <div className="register-container">
            <div className="register-form">
                <h1>注册</h1>
                <div className="form-column">
                    <input
                        type="text"
                        placeholder="请输入用户名"
                        value={username}
                        onChange={(e) => setUsername(e.target.value)}
                    />
                    <select
                        value={gender}
                        onChange={(e) => setGender(e.target.value)}
                    >
                        <option value="" disabled>请选择性别</option>
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                    <input
                        type="text"
                        placeholder="请输入账号"
                        value={usercount}
                        onChange={(e) => setUsercount(e.target.value)}
                    />
                    <input
                        type="password"
                        placeholder="请输入密码"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                    />
                    <input
                        type="text"
                        placeholder="请输入手机号码"
                        value={phone}
                        onChange={(e) => setPhone(e.target.value)}
                    />
                    <div>
                    <DatePicker
                        className="date-picker"
                        vModel={birthdate}
                        showTime
                        type="date"
                        placeholder="请选择生日"
                        style={{ width: '100%' }}
                        onChange={(value) => setBirthdate(value)}
                    />
                    </div><br/>
                </div>
                <Button type="primary" onClick={Register}>注册</Button>
                <div className="login-link">
                    已经有账号? <Link to="/login">点此登录</Link>
                </div>
            </div>
        </div>
    );
}

export default Reg;